import React from 'react'
import { Button,  Select, Form, Input, Space, Table, } from 'antd';
import { Link } from 'react-router-dom'
import './Cailiaocaigouhetong.less'

const { Option } = Select;

const columns = [
  {
    title: '序号',
    width:60,
    dataIndex: 'serial',
    key: 'serial',
    align: 'center',
    fixed:'left'
  },
  {
    title: '合同编号',
    width:200,
    dataIndex: 'number',
    key: 'number',
    align:"center"
  },
  {
    title: '合同名称',
    width:120,
    dataIndex: 'name',
    key: 'name',
    align:"center"
  },
  {
    title: '关联项目',
    width:200,
    dataIndex: 'project',
    key: 'project',
    align:"center"
  },
  {
    title: '合同金额（万）',
    dataIndex: 'money',
    key: 'money',
    align: 'center'
  },
  {
    title: '乙方名称',
    dataIndex: 'mc',
    key: 'mc',
    align: 'center'
  },
  {
    title: '联系人',
    width:80,
    dataIndex: 'contacts',
    key: 'contacts',
    align:"center"
  },
  {
    title: '联系方式',
    width1:100,
    dataIndex: 'tel',
    key: 'tel',
    align:"center"
  },
  {
    title: '创建人',
    width:80,
    dataIndex: 'creater',
    key: 'creater',
    align:"center"
  },
  {
    title: '创建日期',
    width:120,
    dataIndex: 'date',
    key: 'date',
    align:"center"
  },
  {
    title: '操作',
    width:150,
    key: 'operation',
    render: () => (
      <Space size="middle">
        <a href='###'>编辑</a>
        <a href='###'>删除</a>
        <a href='###'>详情</a>
      </Space>
    ),
    align: "center",
    fixed:'right'
  },
];
const data = [
  {
    key: '1',
    serial: 1,
    number: 'CLCG-202108001',
    name: '采购第一批材料',
    project: '苏州地铁项目',
    money: '1000',
    mc: '上海银桥装饰材料',
    contacts: '张海宇',
    tel: 17768829839,
    creater: '张海宇',
    date:'2020-11-12'
  },
  {
    key: '2',
    serial: 2,
    name: '李四施工班组',
    number: '2021-08-0002',
    address: '江苏省 苏州市 姑苏区',
    contacts: '王大力',
    tel: 17768829839,
    contract: 0,
    creater: '王大力',
    date:'2020-11-12'
  },
  {
    key: '3',
    serial: 3,
    name: '王五施工班组',
    number: '2021-08-0003',
    address: '江苏省 苏州市 姑苏区',
    contacts: '王仁',
    tel: 17768829839,
    contract: 3,
    creater: '王仁',
    date:'2020-11-12'
  },
  {
    key: '4',
    serial: 4,
    name: '赵六施工班组',
    number: '2021-08-0004',
    address: '江苏省 苏州市 姑苏区',
    contacts: '李海',
    tel: 17768829839,
    contract: 5,
    creater: '李海',
    date:'2020-11-12'
  },
  {
    key: '5',
    serial: 5,
    name: '供应商五',
    number: '2021-08-0005',
    address: '江苏省 苏州市 姑苏区',
    contacts: '张国焘',
    tel: 17768829839,
    contract: 1,
    creater: '张国焘',
    date:'2020-11-12'
  },
];

export default function Cailiaocaigouhetong() {
  return (
    <div>
      <div className='content'>
      <Form
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          initialValues={{
            remember: true,
          }}
          autoComplete="off"
        >
          <Form.Item label="合同编号" labelCol={{
            span: 9,
            offset: 30,
          }}>
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item label="关联项目" labelCol={{
            span: 9,
            offset: 30,
          }}>
            <Select placeholder="请选择">
              <Option value="china">China</Option>
              <Option value="usa">U.S.A</Option>
            </Select>
          </Form.Item>
          <Form.Item label="乙方名称" labelCol={{
            span: 9,
            offset: 30,
          }}>
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item label="联系人" labelCol={{
            span: 9,
            offset: 30,
          }}>
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item label="联系电话" labelCol={{
            span: 9,
            offset: 30,
          }}>
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item label="创建日期" labelCol={{
            span: 9,
            offset: 30,
          }}>
            <Input type="date"/>
          </Form.Item>
        </Form>

        <div className='but'>
        <Button type="primary" size='large' className='butleft' >查询</Button>
        <Button size='large' className='butright'>重置</Button>
      </div>
      </div>

      <div>
        <Link to="../addgongyingshang">
          <Button type="primary" size='large' className='btnAdd'>新增材料采购合同</Button>
        </Link>
      </div>

      <Table
    columns={columns}
    dataSource={data}
    scroll={{
      x: 1220,
    }}
  />
    </div>
  )
}
